<template>
  <div v-if="permissionsLists(26)">
    <page-header :title="$t('m.Franchisee_')" :has-return="false">
      <el-button
        type="primary"
        v-if="permissionsLists(27) && getAgentLevel() != 2"
        @click="$router.push({ path: '/vender/franchisee/create' })"
      >
        {{ $t('m.branch_Create') }}
      </el-button>
    </page-header>
    <div class="container">
      <div class="list_div">
        <div class="page_list_div">
          <el-form class="page_list_top" label-position="right">
            <el-form-item :label="$t('m.search_') + ':'" class="page_list_top">
              <el-input
                :placeholder="$t('m.agency_Franchisee_Phone')"
                prefix-icon="el-icon-search"
                style="width:320px;"
                clearable
                v-model="params.search"
              />
            </el-form-item>

            <el-form-item
              :label="$t('m.branch_Creationdate') + ':'"
              class="page_list_top"
            >
              <el-date-picker
                style="width:246px;"
                v-model="params.rangeTime"
                :picker-options="datePickerOptions"
                :default-value="timeDefaultShow"
                type="daterange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="timestamp"
                range-separator="~"
                :start-placeholder="$t('m.start_date')"
                :end-placeholder="$t('m.end_date')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('m.status') + ':'" class="page_list_top">
              <el-select
                v-model="params.state"
                ref="select1"
                @change="searchClick('', 1)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button
                class="search_button reset_button"
                @click="searchClick('')"
                >{{ $t('m.search_') }}</el-button
              >
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button class="reset_button" @click="searchClick('1')">{{
                $t('m.refresh')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider class="el_divider"></el-divider>
        <div class="el_table_div">
          <el-table :data="page.records">
            <el-table-column
              prop="agentCode"
              :label="$t('m.Agency_Franchisee_ID')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="agentName"
              :label="$t('m.Shop_Details_Franchisee')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              :label="$t('m.Shop_Details_Contact')"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.phone | phoneFormat(scope.row.code) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="principal"
              :label="$t('m.Person_In_charge')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              :label="$t('m.Franchisee_main_account')"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.accountPhone | phoneFormat(scope.row.accountCode)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('m.Agency_Details_Region')"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.areaAddress | strFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="cabinetNumber"
              :label="$t('m.Stations_number')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="orderNumber"
              :label="$t('m.Shop_Number_Orders')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="ratio"
              :label="$t('m.Shop_Details_Profit_allocation')"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.ratio }}%</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cumulativeIncome"
              :label="$t('m.Agency_Gross_volume')"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.cumulativeIncome | amountFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="pendingAmount"
              :label="$t('m.Shop_Payable_Available')"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.pendingAmount | amountFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="subordinateAgent"
              :label="$t('m.Agency_Franchisee')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="branchNumber"
              :label="$t('m.Agency_Number_shop')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="state"
              :label="$t('m.Agency_Status')"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.state | stateFormat(options) }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              :label="$t('m.branch_Creationdate')"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.createTime | dateformat }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('m.Users_Details_Operation')"
              min-width="104"
              v-if="isArrayEqual([27, 29, 30], permissionsLists)"
            >
              <template slot-scope="scope">
                <el-dropdown placement="bottom">
                  <img
                    src="@/assets/imgs/ic_operation.svg"
                    alt=""
                    class="dropdown_img"
                  />
                  <el-dropdown-menu
                    slot="dropdown"
                    style="white-space: nowrap !important;"
                  >
                    <el-dropdown-item
                      @click.native="detailClick(scope.row.id)"
                      v-if="permissionsLists(29)"
                      >{{ $t('m.Details') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="eidtFranchisee(scope.row.id)"
                      v-if="permissionsLists(27)"
                      >{{ $t('m.branch_Edit') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="dialogClick(scope.row)"
                      v-if="permissionsLists(30)"
                      >{{
                        scope.row.state == 1
                          ? $t('m.Terminate')
                          : $t('m.branch_resumePartnership')
                      }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <emptydata
              slot="empty"
              v-if="!page.records || page.records.length == 0"
            />
          </el-table>
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="page.size"
            :current-page.sync="page.current"
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :total="page.total"
            class="el_pagination"
            @size-change="changePageSize"
            @current-change="changePageNum"
            v-show="page.total > 0"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 恢复合作/停止合作 -->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="cooperationDialog"
        :title="
          agentRow.state == 2
            ? $t('m.branch_resumePartnership')
            : $t('m.Terminate')
        "
        width="520px"
        append-to-body
      >
        <div class="dialog_content">
          <div class="dialog_content1">
            {{
              agentRow.state == 2
                ? $t('m.agency_toreactivate')
                : $t('m.agency_Merchants_and')
            }}
          </div>
          <div class="dialog_content2">
            <img src="@/assets/imgs/ic_warn.svg" alt="" class="dialog_warn" />
            {{
              agentRow.state == 2
                ? $t('m.Franchisee_resumePartnership_hint1')
                : $t('m.Franchisee_resumePartnership_hint2')
            }}
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cooperationDialog = false" class="cancel_btn">{{
            $t('m.cancel')
          }}</el-button>
          <el-button @click="changeState" class="cancel_btn confirm_btn">{{
            $t('m.confirm_')
          }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import page from '@/mixins/page'
export default {
  mixins: [page],
  data () {
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为：‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      },
      params: {
        search: '', //模糊查询
        rangeTime: '', //时间戳范围
        level: '',
        state: ''
      },
      options: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.Users_Status_Dropdown_Normal')
        },
        {
          value: 2,
          label: this.$t('m.branch_Terminate')
        }
      ],
      cooperationDialog: false, //合作弹窗
      agentRow: '',
      permissionsIds: [] //权限id
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(26)) {
      return
    }
    this.getAgentLists()
    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },
  mounted () {},
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //获取代理列表
    getAgentLists () {
      this.$api.agent.getAgentList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },
    // 搜索/重置
    searchClick (reset, e) {
      // 是否重置
      let size = this.page.size
      this.page = this.$options.data.call(this).page
      if (reset) {
        this.params = this.$options.data.call(this).params
        this.timeDefaultShow = new Date()
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
        this.remPageNum()
      } else {
        this.page.size = size
        this.setPageNum(this.page.current, this.page.size, this.params)
      }
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
      this.getAgentLists()
    },
    // 每页数
    changePageSize (val) {
      this.page.current = 1
      this.page.size = val
      this.getAgentLists()
    },
    // 当前页
    changePageNum (val) {
      this.page.current = val
      this.getAgentLists()
    },
    //详情
    detailClick (id) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/vender/franchisee/detail',
        query: { id: id }
      })
    },
    //编辑代理
    eidtFranchisee (id) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/vender/franchisee/create',
        query: { id: id }
      })
    },
    //合作弹窗
    dialogClick (item) {
      this.agentRow = item
      this.cooperationDialog = true
    },
    changeState () {
      let params = {
        id: this.agentRow.id,
        state: this.agentRow.state == 1 ? 2 : 1,
        isRecoveries: true
      }
      this.$openLoading()
      this.$api.agent.agentState(params).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getAgentLists()
          this.cooperationDialog = false
          this.$closeLoading()
        } else {
          this.$message.error(res.message)
          this.$closeLoading()
        }
      })
    },
  }
}
</script>
